<template>
  <div class="item">
    <div class="menu-content">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo menu"
        mode="horizontal"
        @select="handleSelect"
        background-color="#E9F5FA"
        text-color="#000000"
        active-text-color="#409eff"
      >
        <el-menu-item index="0" class="special"
          ><div class="content-text">首页</div></el-menu-item
        >
        <el-menu-item index="1"
          ><div class="content-text">部门简介</div></el-menu-item
        >
        <el-submenu index="2">
          <template slot="title"
            ><span class="content-text">硕士招生</span></template
          >
          <el-menu-item index="2-1"
            ><div class="content-text">政策制度</div></el-menu-item
          >
          <el-menu-item index="2-2"
            ><div class="content-text">招生简章</div></el-menu-item
          >
          <el-menu-item index="2-3"
            ><div class="content-text">招生动态</div></el-menu-item
          >
          <el-menu-item index="2-4"
            ><div class="content-text">导师简介</div></el-menu-item
          >
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><span class="content-text">培养管理</span></template
          >
          <el-menu-item index="3-1"
            ><div class="content-text">政策制度</div></el-menu-item
          >
          <el-menu-item index="3-2"
            ><div class="content-text">通知公告</div></el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"
            ><span class="content-text">学位工作</span></template
          >
          <el-menu-item index="4-1"
            ><div class="content-text">政策制度</div></el-menu-item
          >
          <el-menu-item index="4-2"
            ><div class="content-text">通知公告</div></el-menu-item
          >
          <el-menu-item index="4-3"
            ><div class="content-text">学术成果</div></el-menu-item
          >
          <el-menu-item index="4-4"
            ><div class="content-text">校学位评审委员会</div></el-menu-item
          >
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"
            ><span class="content-text">学科建设</span></template
          >
          <el-menu-item index="5-1"
            ><div class="content-text">学科简介</div></el-menu-item
          >
          <el-menu-item index="5-2"
            ><div class="content-text">重点学科</div></el-menu-item
          >
          <el-menu-item index="5-3"
            ><div class="content-text">学科动态</div></el-menu-item
          >
          <el-menu-item index="5-4"
            ><div class="content-text">学科专业目录</div></el-menu-item
          >
        </el-submenu>
        <el-submenu index="6">
          <template slot="title"
            ><span class="content-text">资料下载</span></template
          >
          <el-menu-item index="6-1"
            ><div class="content-text">硕士招生</div></el-menu-item
          >
          <el-menu-item index="6-2"
            ><div class="content-text">培养管理</div></el-menu-item
          >
          <el-menu-item index="6-3"
            ><div class="content-text">学位工作</div></el-menu-item
          >
          <el-menu-item index="6-4"
            ><div class="content-text">学科建设</div></el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {
      activeIndex2: "0"
    };
  }
};
</script>

<style lang="less" scoped>
.item {
  .menu-conetnt {
    width: 100%;
    .menu {
      .special {
        margin-left: 20%;
      }
      .content-text {
        font-weight: bold;
        font-size: 1.2em;
        font-family: "微软雅黑";
      }
      //鼠标悬浮时 字体颜色
      .el-menu-item:hover {
        outline: 0 !important;
        color: #ffffff !important;
      }
      .el-menu-item.is-active {
        color: #fff !important;
        background: #409eff !important;
      }
      // //鼠标悬浮时主菜单的样式
      .el-submenu__title:focus,
      .el-submenu__title:hover {
        outline: 0 !important;
        color: #23b8ff !important;
        background: #23b8ff !important;
      }
    }
  }
}
</style>
